<template>
    <div class="village-container">
        <!--这里之后根据需要添加happy-scroll-->
        <div class="container">
            <header class="title">
                <span><i class="fa fa-tachometer"></i></span>&nbsp;&nbsp;小区管理
            </header>
            <main class="table-container">
                <div class="search-container">
                    <label for="name">名称: </label>
                    <input type="text" placeholder="请输入名称" id="name" class="name" v-model="name" autocomplete="off">
                    <button class="search" type="button"><i class="fa fa-search"></i>&nbsp;搜索</button>
                    <button class="add pull-right" type="button"><i class="glyphicon glyphicon-plus"></i>&nbsp;新增</button>
                </div>
                <div class="table-scroll-wrapper">
                    <happy-scroll v-if="tableScrollFlag" color="rgba(224,230,237,.8)" size="10" hide-vertical resize>
                        <div class="middle-box">
                            <table class="village-table">
                                <thead>
                                <tr>
                                    <td style="min-width:100px;">名称</td>
                                    <td style="min-width:100px;">总占地面积</td>
                                    <td style="min-width:100px;">总建筑面积</td>
                                    <td style="min-width:100px;">总用地面积</td>
                                    <td style="min-width:50px;">容积率</td>
                                    <td style="min-width:50px;">绿化率</td>
                                    <td style="min-width:50px;">覆盖率</td>
                                    <td style="min-width:100px;">公共场所面积</td>
                                    <td style="min-width:200px;">地址</td>
                                    <td style="min-width:300px;">说明</td>
                                    <td style="min-width:200px;">操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>9区</td>
                                        <td>120平方公里</td>
                                        <td>100平方公里</td>
                                        <td>100平方公里</td>
                                        <td>90%</td>
                                        <td>90%</td>
                                        <td>80%</td>
                                        <td>10平方公里</td>
                                        <td>第七平行宇宙</td>
                                        <td>爱是地方撒的发生阿萨德发生的爱是地方撒
                                            的发生阿萨德发生的爱是地方撒的发生阿萨德发生的
                                            爱是地方撒的发生阿萨德发生的爱是地方撒的发生阿萨德发生的
                                        </td>
                                        <td>
                                            <button class="update-btn">
                                                <span class="glyphicon glyphicon-pencil"></span>&nbsp;修改
                                            </button>
                                            <button class="delete-btn">
                                                <span class="glyphicon glyphicon-trash"></span>&nbsp;删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </happy-scroll>
                </div>
            </main>
        </div>
    </div>
</template>
<!--<script src="./../../assets/lib/iscroll/iscroll.js"></script>-->
<script>
    import common from '@/assets/js/common'
//    import IScroll from '@/assets/lib/iscroll/iscroll'
    //坑:因为vue-cli构建的项目使用的是严格模式,所以需要在.babelrc中添加"ignore": ["./src/assets/lib/mui/js/*.js"]
//    import mui from '@/assets/lib/mui/js/mui.min'
    export default {
        created(){
            this.throttle = common.throttle(() => {
                this.tableScrollFlag = false
                this.$nextTick(() => {
                    this.tableScrollFlag = true
                })
            },300)
            window.addEventListener('resize',this.throttle)
        },
        mounted() {
//            mui(".table-scroll-wrapper").scroll({
//                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
//            });
        },
        data(){
            return {
                name : '',
                tableScrollFlag : true,
                throttle : undefined
            }
        },
        beforeDestroy(){
            window.removeEventListener('resize',this.throttle)
        }
    }
</script>

<style scoped lang="less">
    .village-container{
        width: 100%;
        height: 100%;
        .container{
            padding: 0;
            header.title{
                color:#969696;
                height: 60px;
                margin-bottom: 20px;
                background: #f9fafc;
                border: 1px solid #e0e6ed;
                font-size:18px;
                line-height: 60px;
                padding-left: 20px;
                /*font-weight: 700;*/
            }
            main.table-container{
                margin: 0 auto;
                width: 96%;
                background: #fff;
                padding: 20px;
                .search-container{
                    color:#8391a5;
                    margin-bottom:20px;
                    label{
                        font-size:16px;
                        font-weight: lighter;
                    }
                    input{
                        border: 1px solid #bfcbd9;
                        padding-left: 10px;
                        height: 36px;
                        border-radius: 4px;
                        transition: box-shadow .1s linear;
                    }
                    input:focus{
                        border-color: #20a0ff;
                        box-shadow: 0 0 4px #03a9f4;
                    }
                    input.name{
                        width: 150px;
                    }
                    button{
                        color:#fff;
                        background:#03a9f4;
                        border-color: #20a0ff;
                        padding: 7px;
                        border-radius: 5px;
                        margin-left: 10px;
                    }
                    button:hover{
                        background-color: #2cbfff;
                    }
                }
                .table-scroll-wrapper {
                    width: 100%;
                    .middle-box {
                        min-width: 1380px;
                        padding-right: 20px;
                        .village-table {
                            color: #5e6d82;
                            min-width: 1351px;
                            border-radius: 4px;
                            tr{
                                height: 40px;
                                border: 1px solid #dfe6ec;
                                text-align: center;
                            }
                            thead {
                                tr {
                                    background: #f4f5f9;
                                }
                            }
                            tbody {
                                tr {
                                    border-top: 0;
                                    transition: background-color .2s linear;
                                }
                                tr:hover {
                                    background: #f0f0f0;
                                }
                                button{
                                    color:#fff;
                                    height: 30px;
                                    width: 70px;
                                    border-radius: 5px;
                                }
                                button:hover{
                                    opacity: .8;
                                }
                                .update-btn{
                                    background: #f0ad4e;
                                    border: 1px solid #eea236;
                                }
                                .delete-btn{
                                    background: #c9302c;
                                    border: 1px solid #ac2925;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
